<template>
  <div>
    <el-main>
      <el-table :data="articleList"
                width="800px">
        <el-table-column prop="title"
                         label="标题"
                         width="200">
          <template slot-scope="scope">
            <div @click="edit(scope.row.atcId)">{{scope.row.title}} </div>
          </template>
        </el-table-column>
        <el-table-column prop="topicName"
                         label="分类"
                         width="120"></el-table-column>
        <el-table-column prop
                         label="发布"
                         width="120">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.atcState"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       :active-value="1"
                       :inactive-value="0"
                       @change="state(scope.row.atcId, scope.row.atcState)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="articleExtend.browseNum"
                         label="浏览"
                         width="120"></el-table-column>
        <el-table-column prop="articleExtend.praiseNum"
                         label="点赞"
                         width="120"></el-table-column>
        <el-table-column prop="createTime"
                         label="创建时间"></el-table-column>
        <el-table-column label="操作"
                         fixed="right"
                         width="240"
                         align="right">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small">
              <el-button type="text"
                         size="small"
                         @click="view(scope.row.atcId)">查看</el-button>
            </el-button>
            <el-button type="text"
                       size="small">
              <el-button type="text"
                         size="small"
                         @click="edit(scope.row.atcId)">编辑</el-button>
            </el-button>
            <el-button type="text"
                       size="small"
                       @click="del(scope.row.atcId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { qryArticles, updAtcState, delArticle } from '@/api/apis'
export default {
  name: 'article-lsit',
  data() {
    return {}
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'articleList',
      'articleTotal',
      'groupId'
      // ...
    ]),
  },
  methods: {
    edit(id) {
      this.$store.commit('blog/setModel', 'edit')
      this.$store.commit('blog/setArticleId', id)
    },
    view(id) {
      window.open('https://www.teemor.xyz/article?id=' + id)
    },
    state(id, state) {
        updAtcState({atcId:id, atcState: state}).then(() => {
          this.reloadArticles(this.groupId, 1)
        })
    },

    del(id) {
      delArticle({ atcId: id }).then(() => {
        this.reloadArticles(this.groupId, 1)
      })
    },
    reloadArticles(topicId, page) {
      let map = { topicId: topicId, page: page, pageSize: 10 }
      if (topicId == -1 || topicId == 0) {
        map = { page: page, pageSize: 10 }
      }
      this.topicId = topicId
      qryArticles(map)
        .then(({ data }) => {
          window.console.log('data' + data)
          this.articles = data.values
          this.total = data.total
          this.$store.commit('blog/setArticles', {
            articleList: data.values,
            articleTotal: data.total,
          })
          this.$store.commit('blog/setModel', 'list')
          this.$store.commit('blog/setGroupId', topicId)
        })
        .catch((err) => {
          window.console.log(err)
        })
    },
  },
}
</script>
